<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/shoppingCar.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2790765_pqm82v7ytg.css">
</head>

<body>


    <!-- 购物车 -->
    <div class="container w">
        <div class="cart-main">
            <div class="cart-wrap">
                <div class="list-header">
                    <div class="col col-check">
                        <label>
                            <input type="checkbox" class="check-all">&emsp;全选
                        </label>
                    </div>
                    <div class="col col-img"></div>
                    <div class="col col-detail">商品名称</div>
                    <div class="col col-price">单价</div>
                    <div class="col col-count">数量</div>
                    <div class="col col-subtotal">小计</div>
                    <div class="col col-operate">操作</div>
                </div>
                <div class="list-body">
                    <div class="list-item">
                        <div class="col col-check">
                            <label>
                                <input type="checkbox" class="check-one" onclick="checkOne()">
                            </label>
                        </div>
                        <div class="col col-img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1632713426.30988142.jpg?thumb=1&w=100&h=100"
                                alt="">
                        </div>
                        <div class="col col-detail">
                            Xiaomi Civi 8GB+128GB 闪闪黑</div>
                        <div class="col col-price">2599元</div>
                        <div class="col col-count">
                            <div class="countBox">
                                <span class="reduce"></span>
                                <span class="countSpan">1</span>
                                <span class="add">+</span>
                            </div>
                        </div>
                        <div class="col col-subtotal">2599元</div>
                        <div class="col col-operate"><i class="iconfont icon-close delete"></i></div>
                    </div>
                    <div class="list-item">
                        <div class="col col-check">
                            <label>
                                <input type="checkbox" class="check-one" onclick="checkOne()">
                            </label>
                        </div>
                        <div class="col col-img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628588553.56819324.jpg?thumb=1&w=100&h=100"
                                alt="">
                        </div>
                        <div class="col col-detail">Xiaomi MIX 4 8GB+128GB 陶瓷黑</div>
                        <div class="col col-price">4999元</div>
                        <div class="col col-count">
                            <div class="countBox">
                                <span class="reduce"></span>
                                <span class="countSpan">1</span>
                                <span class="add">+</span>
                            </div>
                        </div>
                        <div class="col col-subtotal">4999元</div>
                        <div class="col col-operate"><i class="iconfont icon-close delete"></i></div>
                    </div>
                    <div class="list-item">
                        <div class="col col-check">
                            <label>
                                <input type="checkbox" class="check-one" onclick="checkOne()">
                            </label>
                        </div>
                        <div class="col col-img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1622000680.1781885.jpg?thumb=1&w=100&h=100"
                                alt="">
                        </div>
                        <div class="col col-detail">Redmi AirDots 3 Pro曜石黑</div>
                        <div class="col col-price">299元</div>
                        <div class="col col-count">
                            <div class="countBox">
                                <span class="reduce"></span>
                                <span class="countSpan">1</span>
                                <span class="add">+</span>
                            </div>
                        </div>
                        <div class="col col-subtotal">299元</div>
                        <div class="col col-operate"><i class="iconfont icon-close delete"></i></div>
                    </div>
                    <div class="list-item">
                        <div class="col col-check">
                            <label>
                                <input type="checkbox" class="check-one" onclick="checkOne()">
                            </label>
                        </div>
                        <div class="col col-img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1621955784.84614979.jpg?thumb=1&w=100&h=100"
                                alt="">
                        </div>
                        <div class="col col-detail">
                            Redmi Note 10 Pro 6GB+128GB 月魄</div>
                        <div class="col col-price">1599元</div>
                        <div class="col col-count">
                            <div class="countBox">
                                <span class="reduce"></span>
                                <span class="countSpan">1</span>
                                <span class="add">+</span>
                            </div>
                        </div>
                        <div class="col col-subtotal">1599元</div>
                        <div class="col col-operate"><i class="iconfont icon-close delete"></i></div>
                    </div>
                </div>
                <div class="list-footer">
                    <div class="col col-continue"><a href="javascript:;" class="clear">清空购物车</a></div>
                    <span class="col col-sep">|</span>
                    <div class="col col-center">
                        <div class="numTips">
                            共 <span class="totalNum"></span> 件商品，已选择 <span class="selectedNum">0</span> 件
                        </div>
                        <div class="priceTips">
                            合计：<span class="selectedTotal">0</span>元
                        </div>
                    </div>
                    <div class="col col-total">
                        <a href="">去结算</a>
                        <div class="totalTips">
                            请勾选需要结算的商品
                            <i class="iconfont icon-xiasanjiao-copy arrow"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <script>

        // 小计  NaN?   元   parseFloat()    replace('元' , '')   substring()   substr()


        // 全选  --  点击全选，下面的单选都勾选  .checked = true / false
        var oAll = document.querySelector('.check-all');
        var oOnes = document.querySelectorAll('.check-one');   // 4

        var oCountSpans = document.querySelectorAll('.countSpan');
        var oTotalNum = document.querySelector('.totalNum');


        var oselectedNum = document.querySelector('.selectedNum');

        var priceAll = document.querySelector('.selectedTotal');



        oAll.onclick = function () {
            for (var i = 0; i < oOnes.length; i++) {
                oOnes[i].checked = this.checked;
            }

            // 选中小计
            selectTotal()
        }


        // 单选 --- 行内事件    onclick="函数()"
        function checkOne() {
            var count = 0;
            for (var i = 0; i < oOnes.length; i++) {
                if (oOnes[i].checked) {
                    count++;
                }
            }
            oAll.checked = count === oOnes.length;

            // 选中小计
            selectTotal()
        }



        // 加
        var oAdds = document.querySelectorAll('.add');
        // 循环绑定事件
        for (var i = 0; i < oAdds.length; i++) {
            oAdds[i].onclick = function () {

                // console.log(this.previousElementSibling.value);
                this.previousElementSibling.innerHTML++;

                // 小计
                this.parentElement.parentElement.nextElementSibling.innerHTML = this.previousElementSibling.innerHTML * parseFloat(this.parentElement.parentElement.previousElementSibling.innerHTML) + '元';

                // 给减法添加减号
                if (this.previousElementSibling.previousElementSibling.innerHTML === '') {
                    this.previousElementSibling.previousElementSibling.innerHTML = '-';
                }

                numTotal()
                // 选中小计
                selectTotal()
            }
        }



        // 减
        var oReduces = document.querySelectorAll('.reduce');
        // 循环绑定事件
        for (var i = 0; i < oReduces.length; i++) {
            oReduces[i].onclick = function () {
                // if (this.nextElementSibling.innerHTML <= 1) {
                //     alert('不能再减啦');
                // }
                // else {
                //     this.nextElementSibling.innerHTML--;
                // }


                // if (this.nextElementSibling.innerHTML <= 1) {
                //     alert('不能再减啦');
                //     return;   // 阻断程序的向下执行
                // }
                // this.nextElementSibling.innerHTML--;


                // 通过判断有没有减号来实现减法
                if (this.innerHTML === '-') {
                    this.nextElementSibling.innerHTML--;
                    this.parentElement.parentElement.nextElementSibling.innerHTML = this.nextElementSibling.innerHTML * this.parentElement.parentElement.previousElementSibling.innerHTML.replace('元', '') + '元';
                    // 判断数量是否等于1
                    if (this.nextElementSibling.innerHTML <= 1) {
                        this.innerHTML = ''
                    }

                    numTotal()
                    // 选中小计
                    selectTotal()
                }
                else {
                    alert('不能再减啦');
                }

            }
        }



        // 删除
        var oDels = document.querySelectorAll('.delete');
        for (var i = 0; i < oDels.length; i++) {
            oDels[i].onclick = function () {
                this.parentElement.parentElement.remove();

                // 删除之后，单选会有bug  --- 单选的数量变少了   重新获取一下
                oOnes = document.querySelectorAll('.check-one');


                // 删除之后，有可能再次反向勾选那个全选
                checkOne()

                // 删除之后判断购物车是否有商品  。。。。。

                numTotal();

                // 选中小计
                selectTotal()
            }
        }



        numTotal();


        // 数量合计
        function numTotal() {
            var totalNum = 0;

            for (var i = 0; i < oCountSpans.length; i++) {
                totalNum += oCountSpans[i].innerHTML * 1;
            }
            oTotalNum.innerHTML = totalNum;
        }




        // 已选择合计
        function selectTotal() {
            var num = 0; // 选中的数量
            var money = 0;  //选中的价格合计
            // 判断是否选中
            for (var i = 0; i < oOnes.length; i++) {
                if (oOnes[i].checked) {
                    num += oOnes[i].parentElement.parentElement.parentElement.querySelector('.countSpan').innerHTML * 1;
                    money += oOnes[i].parentElement.parentElement.parentElement.querySelector('.col-subtotal').innerHTML.replace('元', '') * 1;
                }
            }

            oselectedNum.innerHTML = num;


            priceAll.innerHTML = money;
        }






    </script>



</body>

</html>